<script setup lang="ts">
import axios from 'axios'
import { ref,onMounted } from 'vue'

const book = ref({
    ID:'',
    name:'',
    author:'',
    date:'',
    press:'',
    price:'',
    statu:''

});

const tableData = ref([]);

const doList = () =>{
    axios({
        method: 'get',
        url: '/api/book',
        params: book.value // GET请求用params传参
    }).then(response => {
        tableData.value = response.data || []; // 确保是数组
    }).catch(error => {
        console.error('查询失败:', error);
        alert('查询失败，请重试');
    });

};

const release = ()=>{
    book.value={
        ID:'',
            name:'',
            author:'',
            date:'',
            press:'',
            price:'',
            statu:''
    };

};

const doUpdate = ()=>{
  // 简单验证
  if (!book.value.ID) {
    return alert("书籍 ID 不能为空");
  }
  if (!book.value.name) {
    return alert("书名不能为空");
  }
  const price = parseFloat(book.value.price);
  if (isNaN(price) || price <= 0) {
    return alert("价格必须为大于 0 的数字");
  }


  axios({
    method: 'put',
    url: '/api/book',
    data: book.value
  }).then(response => {
    const success = response.data;
    if (success > 0) {
      alert("修改成功");
      doList();
    } else {
      alert("修改失败，可能书籍ID不存在");
    }
  }).catch(error => {
    console.error("请求失败：", error);
    if (error.response) {
      const status = error.response.status;
      if (status === 400) {
        alert("参数错误，请检查输入");
      } else if (status === 403) {
        alert("权限不足，无法修改");
      } else if (status === 404) {
        alert("书籍不存在");
      }
    } else {
      alert("网络错误，请重试");
    }
  });
}

const doDelete = ()=> {
  const bookId = book.value.ID;
  if (!bookId) {
    return alert("请先选择要删除的书籍");
  }
  if (confirm(`确定要删除ID为${bookId}的图书吗？`)) {
    axios({
      method: 'delete',
      url: `/api/book/${bookId}`
    }).then(response => {
      const result = response.data;
      if (result.success || result > 0) { // 兼容后端不同返回格式
        alert('删除成功');
        doList(); // 刷新列表
      } else {
        alert('删除失败');
      }
    }).catch(error => {
      console.error('删除失败:', error);
      alert('删除失败，请重试');
    });
  }
}

onMounted(()=>{
  // 页面初始化查询
  doList();
})
</script>


<template>
  <!--from表单-->
    <el-form :model="book" label-width="auto" style="max-width: 600px">
        <el-form-item label="书籍ID">
            <el-input v-model="book.ID" />
        </el-form-item>
        <el-form-item label="书名">
            <el-input v-model="book.name" />
        </el-form-item>
        <el-form-item label="作者">
            <el-input v-model="book.author" />
        </el-form-item>
        <el-form-item label="出版日期">
            <el-input v-model="book.date" />
        </el-form-item>
        <el-form-item label="出版社">
            <el-input v-model="book.press" />
        </el-form-item>
        <el-form-item label="价格">
            <el-input v-model="book.price" />
        </el-form-item>
        <el-form-item label="状态">
            <el-input v-model="book.statu" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="doList">查询</el-button>
            <el-button type="default" @click="release">重置</el-button>
        </el-form-item>
    </el-form>

  <!-- tabel 表格  -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="ID" label="书籍序号" width="150" />
        <el-table-column prop="name" label="书名" width="120" />
        <el-table-column prop="author" label="作者" width="120" />
        <el-table-column prop="date" label="出版日期" width="120" />
        <el-table-column prop="press" label="出版社" width="120" />
        <el-table-column prop="price" label="价格" width="120" />
        <el-table-column prop="statu" label="状态" width="120" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default>
                <el-button link type="primary" size="small" @click="doUpdate">修改</el-button>
                <el-button link type="primary" size="small" @click="doDelete">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

</template>
<style scoped>

</style>